<template>
	<div class="wemall-admin-sidebar">
		<el-menu @select="onSelect" :default-active="defaultMenuItemId" theme="dark" :style="sidebarHeight">
			<el-submenu v-for="item in menu" :index="item.id" :title="item.title">
				<template slot="title">{{item.title}}</template>
				<el-menu-item v-for="menuItem in item.children" :index="menuItem.id">{{menuItem.title}}</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<style>
	.wemall-admin-sidebar {
		width: 220px;
        height: 100%;
        float: left;	
        z-index: 1000;
        clear: both;
        background-color: #324157;
	}
</style>

<script>
	var idIncrement = 0;

	function getId() {
		return '' + (idIncrement++);
	}

	export default {
        data() {
            return {
            	defaultMenuItemId: '1',
            	menu: [
            		{
            			id    : getId(),
            			title : '平台概况',
            			children: [
            				{
            					id    : getId(),
            					title : '客房状态',
            					url   : '/'
            				}
            			]
            		},
            		{
            			id    : getId(),
            			title : '客房配置',
            			children: [
            				{
            					id    : getId(),
            					title : '区域设置',
                                url   : '/admin/setting/area'	
            				},
            				{
            					id    : getId(),
            					title : '房型设置'	
            				},
            				{
            					id    : getId(),
            					title : '楼层设置'	
            				}
            			]
            		},
                    {
                        id    : getId(),
                        title : '系统设置',
                        children: [
                            {
                                id    : getId(),
                                title : '用户设置',
                                url   : '/admin/category/list' 
                            }
                        ]
                    }
            	],
            	menuMap: {},
                sidebarHeight: {
                    minHeight: '0px'
                }
            };
        },
        mounted: function () {
        	for (var i = 0; i < this.menu.length; i++) {
        		var menuItem = this.menu[i];
        		for (var j = 0; j < menuItem.children.length; j++) {
        			var key = menuItem.children[j].id;
        			this.menuMap[key] = menuItem.children[j];
        		}
        	}
        },
        updated: function() {
            const minHeight = document.body.scrollHeight - 60 + 'px';
            if (this.sidebarHeight.minHeight != minHeight) {
                this.sidebarHeight.minHeight = minHeight;
            }
        },
        created: function() {
            const self = this;
            $('body').bind('mousewheel', function() {
                const minHeight = document.body.scrollHeight - 60 + 'px';
                if (self.sidebarHeight.minHeight != minHeight) {
                    self.sidebarHeight.minHeight = minHeight;
                }
            });
            this.sidebarHeight.minHeight = document.body.scrollHeight - 60 + 'px';
        },
        methods: {
        	onSelect(id) {
        		var data = this.menuMap[id];
        		location.href = data.url;
        	}
        }
    }
</script>